<template>
  <div class="div">主页</div>
  <button @click="methods.toHomemin">go homemin</button>
  <van-divider>以下是vuex的使用</van-divider>
  <span>vuex中的count：{{ state.count }}</span>
  <van-divider>以下是axios的使用</van-divider>
  <van-button @click="methods.postFun">post请求mock数据</van-button>
  <van-button @click="methods.getFun">get请求mock数据</van-button>
  <!-- 解析html文件 -->
  <div class="bookmarkDiv" v-show="false" v-html="data.str"></div>
</template>
<script>
import { computed, getCurrentInstance, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    // console.log('vux数据仓库store:', store.state)
    const instance = getCurrentInstance()
    const { proxy } = instance
    console.log('proxy:', proxy)
    const data = reactive({
      str: '',
      docArr: []
    })
    function toHomemin() {
      router.push({
        path: '/homemin',
        query: {
          a: '123',
          b: '456'
        }
      })
    }

    async function postFun() {
      const res = await proxy.$post('/parameter/postquery')
      console.log('请求：', res)
    }

    async function getFun() {
      const res = await proxy.$get('/parameter/getquery')
      console.log('请求：', res)
    }

    // 读取html文件，存储文档
    async function getBookMarks() {
      data.str = await proxy.$get('/api/bookmarks.html')
      nextTick(() => {
        const doms = document.querySelectorAll('.bookmarkDiv a')
        for (const dom of doms) {
          data.docArr.push({
            title: dom.innerText,
            content: dom.href
          })
        }
        store.commit('addDocs', {
          docArr: data.docArr
        })
      })
    }
    getBookMarks()

    return {
      data,
      methods: {
        toHomemin,
        postFun,
        getFun
      },
      // count: computed(() => store.state.count), //官方推荐使用计算属性保留“响应性”
      state: store.state,
      status: computed(() => store.getters.getStatus)
    }
  }
}
</script>
<style>
/* px自动转为vw */
.div {
  width: 100px;
}
</style>
